<template>
  <el-row :gutter="20">
    <el-col :span="8" style="margin-top: 20px">
      <el-card shadow="hoveralways">
        <div class="user">
          <img :src="userImg" alt="" />
          <hr />
          <div class="userInfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="loginInfo">
          <p>上次登录时间：<span>2021-7-19</span></p>
          <p>上次登录地点：<span>武汉</span></p>
        </div>
      </el-card>
      <el-card shadow="hover" style="margin-top: 20px">
        <el-table :data="tableData" border style="width: 100%">
          <!-- for循环对象参数为val key index  prop接收参数为tableDate下的key label接收的参数为tableDate下的val-->
          <el-table-column
            v-for="(val, key) in tableLabel"
            :prop="key"
            :label="val"
            :key="key"
          >
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="margin-top: 20px">
      <div class="numItem">
        <el-card
          shadow="hover"
          v-for="item in countData"
          :body-style="{ padding: '10px', display: 'flex' }"
          :key="item.name"
        >
          <i
            :class="['el-icon-' + item.icon]"
            :style="{ 'background-color': item.color }"
          ></i>
          <div class="detail">
            <p class="num">￥{{ item.value }}</p>
            <p>{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <!-- 折线图 -->
      <el-card
        shadow="hover"
        :body-style="{ padding: '20px', height: '280px' }"
        class="el-card-echarts"
      >
      <!-- <div ref="orderEcharts" style="height:250px;">
      </div> -->

        <echarts
          :chartData="echartData.order"
          :chartType="'line'"
          style="height: 250px"
          ref="orderEcharts"
        ></echarts>
      </el-card>
      <div class="graph">
        <!-- 柱状图 -->
        <el-card shadow="hover">
          <!-- <div 
            style="height: 250px"
            ref="userEcharts">
          </div> -->
          <echarts
            :chartData="echartData.user"
            :chartType="'bar'"            
            style="height: 250px"
          ></echarts>
        </el-card>
        <!-- 饼状图 -->
        <el-card shadow="hover">
          <echarts
            :chartData="echartData.video"
            :chartType="'pie'"
            style="height: 250px"
            ref="videoEcharts"
          ></echarts>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { getHomeData } from "@/api/data";
import * as echarts from 'echarts'
// 引入echrts
import Echarts from "@/components/Echarts";

export default {
  name: "Home",
  components: {
    Echarts,
  },
  data() {
    return {
      userImg: require("@/assets/images/user.png"),
      echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          series: [],
        },
      },
      tableData: [
        {
          name: "oppo",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "vivo",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "苹果",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "小米",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "三星",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "魅族",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
      ],
      tableLabel: {
        name: "品牌",
        todayBuy: "今日购买量",
        monthBuy: "本月购买量",
        totalBuy: "总购买量",
      },
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    };
  },
  mounted() {
    getHomeData().then((res) => {
      const { code, data } = res.data;
      if (code == 20000) {
        this.tableData = data.tableData;
        const order = data.orderData;
        // Object.keys()传入参数返回key值
        const keyArray = Object.keys(order.data[0]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });
        this.echartData.order.xData = data.orderData.date;
        this.echartData.order.series = series;
        const option = {
          xAxis: {
            data: order.date,
          },
          yAxis: {},
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: keyArray,
          },
          series,
        };

        // const ordderEcharts= echarts.init(this.$refs.orderEcharts);
        // ordderEcharts.setOption(option);

        // 用户图
        // const userOption = {
        //   legend: {
        //     // 图例文字颜色
        //     textStyle: {
        //       color: "#333",
        //     },
        //   },
        //   grid: {
        //     left: "20%",
        //   },
        //   // 提示框
        //   tooltip: {
        //     trigger: "axis",
        //   },
        //   xAxis: {
        //     type: "category", // 类目轴
        //     data: data.userData.map(item => item.date),
        //     axisLine: {
        //       lineStyle: {
        //         color: "#17b3a3",
        //       },
        //     },
        //     axisLabel: {
        //       interval: 0,
        //       color: "#333",
        //     },
        //   },
        //   yAxis: [
        //     {
        //       type: "value",
        //       axisLine: {
        //         lineStyle: {
        //           color: "#17b3a3",
        //         },
        //       },
        //     },
        //   ],
        //   color: ["#2ec7c9", "#b6a2de"],
        //   series: [
        //     {
        //       name:'新增用户',
        //       data:data.userData.map(item => item.new),
        //       type:'bar',
        //     },
        //     {

        //       name:'活跃用户',
        //       data:data.userData.map(item => item.active),
        //       type:'bar',
        //     }
        //   ],
        // }
        // // 用户图标
        // const userEcharts = echarts.init(this.$refs.userEcharts)
        // userEcharts.setOption(userOption)
        // console.log(userOption.xAxis.data)

        this.echartData.user.xData = data.userData.map(item => item.date);
        this.echartData.user.series = [
          {
            name: "新增用户",
            data: data.userData.map((item) => item.new),
            type: "bar",
          },
          {
            name: "活跃用户",
            data: data.userData.map((item) => item.active),
            type: "bar",
          },
        ];

        // 饼状图
        // const videoOption = {
        //   tooltip: {
        //     trigger: "item",
        //   },
        //   color: [
        //     "#0f78f4",
        //     "#dd536b",
        //     "#9462e5",
        //     "#a6a6a6",
        //     "#e1bb22",
        //     "#39c362",
        //     "#3ed1cf",
        //   ],
        //   series: [
        //     {
        //       data: data.videoData,
        //       type: "pie",
        //     },
        //   ],
        // };
        // const videoEcharts = echarts.init(this.$refs.videoEcharts);
        // videoEcharts.setOption(videoOption);
        this.echartData.video.series = [
          {
            data: data.videoData,
            type: "pie",
          },
        ];
      }
    });
  },
};
</script>

<style lang="less" scoped>
.user {
  width: auto;
  img {
    width: 100%;
  }
}
.numItem {
  display: flex;
  flex-flow: wrap;
  margin-bottom: 20px;
  .el-card {
    width: 33.33%;
    i {
      width: 100px;
      height: 100px;
      &:before {
        font-size: 40px;
        margin-left: 30px;
        color: #fff;
        line-height: 100px;
      }
    }
    .detail {
      padding: 10px;
      .num {
        font-size: 30px;
        line-height: 60px;
      }
      p {
        font-size: 15px;
      }
    }
  }
}
.el-card-echarts {
  overflow: auto;
}
.graph {
  display: flex;
  margin-top: 20px;
  height: 280px;
  .el-card {
    width: 48%;
    height: 280px;
    &:nth-child(1) {
      margin-right: 4%;
    }
  }
}
</style>
